import RightFixed from '@/layouts/RightFixed';
import TopBread from '@/layouts/TopBread';
import { getAllWrite, selectWriteByName } from '@/services/write';
import { colorStr } from '@/utils/utils';
import { Input, Table } from 'antd';
import moment from 'moment';
import { useCallback, useEffect, useState } from 'react';
import { history } from 'umi';
import styles from './index.less';

const Advice: React.FC = () => {
  const { Search } = Input;
  const { lastRoute }: any = history?.location?.query;
  const [color, setColor] = useState<string>(localStorage.getItem('color') || '#1a7721');
  const [search, setSearch] = useState<string>('');
  const [list, setList] = useState<any[]>([]);
  const [total, setTotal] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);

  const onSearch = async (value: string) => {
    try {
      await selectWriteByName({ title: value }).then((res) => {
        setList(res);
      });
    } catch (error) {
      console.log(error);
    }
  };

  // 分页的方法
  const handlePageChange = (page: any) => {
    setCurrentPage(page);
  };

  const goPosts = (id: string) => {
    history.push({
      pathname: './write',
      query: { lastRoute: '养生小专栏', id: id },
    });
  };

  const getList = useCallback(async () => {
    try {
      await getAllWrite({ pageIndex: currentPage, pageSize: 16 }).then((res) => {
        setTotal(res.total);
        setList(res.list);
      });
    } catch (error) {
      console.log(error);
    }
  }, [currentPage]);

  useEffect(() => {
    getList();
  }, [getList]);

  const columns = [
    {
      title: '文章标题',
      dataIndex: 'title',
      ellipsis: true,
      width: 500,
      render: (_: any, record: any) => {
        return (
          <div
            onClick={() => {
              goPosts(record.id);
            }}
            className={styles.tabletext}
          >
            {record.title}
          </div>
        );
      },
    },
    {
      title: '作者',
      dataIndex: 'author',
      ellipsis: true,
      render: (_: any, record: any) => {
        return <div key={record.id}>四季养生购物网站</div>;
      },
    },
    {
      title: '发布时间',
      dataIndex: 'timeadd',
      render: (_: any, record: any) => {
        return (
          <div key={record.id}>{`${moment(Number(record.timeadd)).format(
            'YYYY-MM-DD HH:mm:ss',
          )}`}</div>
        );
      },
    },
  ];

  return (
    <div className={styles.container}>
      <TopBread lastRoute={lastRoute} now={'养生小专栏'} setColorParent={setColor} />
      <div className={styles.content}>
        <div className={styles.inContent}>
          <div
            className={styles.topDiv}
            style={{
              borderTop: ` ${color} 3px solid`,
            }}
          >
            <div className={styles.topText}>文章列表</div>
            <div>
              <Search
                placeholder={`请输入您要查找的文章`}
                onSearch={onSearch}
                value={search}
                onChange={(e) => {
                  setSearch(e.target.value);
                }}
                style={{
                  width: 391,
                  height: 34,
                  borderRadius: 6,
                  color: `${colorStr(9)}`,
                }}
              />
              <span
                style={{ marginLeft: 15, cursor: 'pointer' }}
                onClick={() => {
                  getList();
                  setSearch('');
                }}
              >
                清空搜索
              </span>
            </div>
          </div>
          <div className={styles.tableStyle}>
            <Table
              columns={columns}
              dataSource={list}
              size="small"
              pagination={{
                total,
                current: currentPage, // 当前页数
                pageSize: 16, // 每页条数
                size: 'small', // 分页的样式
                hideOnSinglePage: true, // 只有一页时是否隐藏分页器
                onChange: handlePageChange, // 分页的方法
              }}
            />
          </div>
        </div>
      </div>
      <RightFixed color={color} thisRoute={'养生小专栏'} />
    </div>
  );
};
export default Advice;
